<template>
  <div>
    <el-container class="home-container">
      <el-col :span="2"></el-col>
      <el-col :span="20">
        <el-card shadow="always">
          <div slot="header">
            <span>低代码平台</span>
          </div>
          流程:
          <el-select v-model="definationKey" filterable clearable style="width: 130px" size="mini" placeholder="请选择流程" @change="showPreStartInstance">
            <el-option
              v-for="item in processInfo"
              :key="item.id"
              :label="item.processname"
              :value="item.processkey">
            </el-option>
          </el-select>
          <div style="text-align: left;width: 100%;">
            <v-form-render :form-json="formJson" :form-data="formData" :option-data="optionData" ref="vFormRef">
            </v-form-render>
            <el-button type="primary" @click="submitForm">提交表单</el-button>
          </div>
        </el-card>

      </el-col>
      <el-col :span="2"></el-col>
    </el-container>
  </div>
</template>

<script>


//component javascript
export default {
    data(){
      return {
        formId:'',
        formJson:{},
        formData:{},
        optionData:{},
        definationKey:'',
        processInfo:[]
      }
    },
    mounted: function () {
      this.initData();
    },methods: {
      initData(){
        this.getRequest("/ddm/listProcess").then(resp => {
          this.processInfo = resp.data;
          //showPreStartInstance();
        })
      },
      showPreStartInstance(){
        this.getRequest("/ddm/preStartInstance/"+this.definationKey).then(resp => {
              if (resp && resp.status == 200) {
                  var data = resp.data;
                  console.log(data);
                  console.log(data.data);
                  if(data!=null){
                    this.formId = data.formId;
                    this.$refs.vFormRef.setFormJson(data.data);
                  }
              }
          })
      },
      submitForm() {
        this.$refs.vFormRef.getFormData().then(formData => {
          // Form Validation OK
          let subData = formData;

          console.log(subData);

          this.postRequest("/ddm/startInstance/"+this.definationKey+"/"+this.formId,{"values":JSON.stringify(subData),headers:{
              'Content-Type': 'application/json;charset=UTF-8'}
            }).then(resp => {
              console.log(resp);
          })

        }).catch(error => {
          // Form Validation failed
          this.$message.error(error)
        })
      }
}
}

</script>

<style scoped>


</style>
